<template>
  <el-dialog :title="title" :visible.sync="showDialog" @close="closeForm">
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
      <el-row type="flex">
        <!-- 左侧 -->
        <el-col :span="12">
          <el-form-item label="归属学科" prop="subject_id" label-width="100px">
            <el-select
              v-model="formData.subject_id"
              clearable
              size="small"
              placeholder="请选择"
              @change="subjectSelectChange"
            >
              <el-option
                v-for="item in subject"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名" prop="student_name" label-width="100px">
            <el-input v-model="formData.student_name" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="密码" label-width="100px">
            <el-input v-model="formData.student_password" placeholder="默认密码是 姓名+admin88" />
          </el-form-item>
          <br><br><br>
          <el-form-item label="状态" label-width="100px">
            <el-radio v-model="formData.student_state" :label="1">待审核</el-radio>
            <el-radio v-model="formData.student_state" :label="2">正常</el-radio>
            <el-radio v-model="formData.student_state" :label="3">禁用</el-radio>
          </el-form-item>
        </el-col>

        <!-- 右侧 -->
        <el-col :span="12">
          <el-form-item label="归属班级" prop="class_id" label-width="100px">
            <el-select
              v-model="formData.class_id"
              clearable
              size="small"
              placeholder="请确保已选择学科"
            >
              <el-option
                v-for="item in className"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="student_phone" label-width="100px">
            <el-input v-model="formData.student_phone" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="性别" label-width="100px">
            <el-radio v-model="formData.student_sex" :label="1">男</el-radio>
            <el-radio v-model="formData.student_sex" :label="2">女</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 按钮 -->
      <el-row type="flex" justify="end">
        <el-button @click="showDialog=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { classListApi } from '@/api/class'
import { updateStudentInfoApi, addStudent } from '@/api/student'
export default {
  name: 'StudentDialog',
  props: {
    subject: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: false, // 弹框开关
      formData: { // 表单数据
        class_id: '',
        created_at: '',
        creator_id: '',
        student_name: '',
        student_password: '',
        student_phone: '',
        student_sex: 1,
        student_state: 1,
        subject_id: ''
      },
      rules: {
        subject_id: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        student_name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
        class_id: [{ required: true, message: '请选择班级', trigger: 'blur' }],
        student_phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
      },
      className: [] // 班级名称
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改学员信息' : '添加学员信息'
    }
  },
  methods: {
    // 学科下拉框发生变化触发
    async subjectSelectChange(subjectId) {
      // console.log('subjectSelectChange', subjectId) // 当前选择的值
      // 发送请求--获取对应的班级
      const res = await classListApi({
        page: 1,
        limit: 1000,
        subject_id: subjectId
      })
      // console.log('className', res)
      this.className = res.list
    },
    // 提交行为
    async onSubmit() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 修改
        await updateStudentInfoApi(this.formData)
      } else {
        // 添加
        await addStudent(this.formData)
      }
      this.$message.success('操作成功')
      this.formData = {
        class_id: '',
        created_at: '',
        creator_id: '',
        student_name: '',
        student_password: '',
        student_phone: '',
        student_sex: 1,
        student_state: 3,
        subject_id: ''
      }
      this.$refs.form.clearValidate()
      this.showDialog = false
      this.$emit('update')
    },
    // 关闭弹框
    closeForm() {
      this.formData = {
        class_id: '',
        created_at: '',
        creator_id: '',
        student_name: '',
        student_password: '',
        student_phone: '',
        student_sex: 1,
        student_state: 3,
        subject_id: ''
      }
      this.$refs.form.clearValidate()
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
